<template>
  <div class="addGoods">
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
     <el-alert
     class="mb-15"
      title="添加商品信息"
      type="success"
      close-text="知道了">
    </el-alert>
    <el-steps :active="activeNum" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
      <el-tab-pane label="基本信息" name="first">基本信息</el-tab-pane>
      <el-tab-pane label="商品参数" name="second">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="third">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="fourth">
        <!-- w图片上传 -->
        <!-- action要按照后台规定的url -->
        <el-upload
          :headers="myheader"
          action="http://127.0.0.1:8888/api/private/v1/upload/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success='handleSuccess'
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="fifth">
        <!-- 富文本 -->
        <quill-editor v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
        </quill-editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  // import Quill from "quill";
  // import { someModule } from "../yourModulePath/someQuillModule.js";
  // Quill.register("modules/someModule", someModule);
  export default {
    data() {
      return {
        // 设置响应头重新添加token
        myheader:{
          Authorization:localStorage.getItem('adminToken')
        },
        // 文件上传的数据
        fileList: [],
        // 步骤进程
        activeNum: 0,
        activeName: "first",
        // 富文本内容
        content: "<h2>I am Example</h2>",
        editorOption: {
          // some quill options
        }
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.activeNum = parseInt(tab.index);
      },
      // 富文本方法
      onEditorBlur(quill) {
        console.log("editor blur!", quill);
      },
      onEditorFocus(quill) {
        console.log("editor focus!", quill);
      },
      onEditorReady(quill) {
        console.log("editor ready!", quill);
      },
      // 图片上传回调    预览、移除时
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleSuccess(response, file, fileList){
        console.log(response, file, fileList);
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      }
    }
  };
</script>
<style lang="scss">
  .addGoods {
    .el-tabs {
      height : 400px;
    }
  }
  .quill-editor {
    height: 400px;
    .ql-container {
      height : 300px;
    }
  }
</style>